<template>
  <div class="news-detail">
    <!-- 文章头部 -->
    <div class="article-header">
      <div class="header-content">
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/news' }">资讯中心</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/news/list' }">资讯列表</el-breadcrumb-item>
            <el-breadcrumb-item>{{ article.title }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <div class="article-meta">
          <el-tag :type="getCategoryColor(article.category)" size="large">
            {{ article.category }}
          </el-tag>
          <span class="publish-time">{{ formatDateTime(article.publishedAt) }}</span>
          <span class="read-count">
            <el-icon><View /></el-icon>
            {{ article.readCount }}次阅读
          </span>
        </div>

        <h1 class="article-title">{{ article.title }}</h1>

        <div class="article-summary">{{ article.summary }}</div>

        <div class="author-info">
          <div class="author-avatar">
            <img :src="article.authorAvatar || '/images/default-avatar.png'" :alt="article.author" />
          </div>
          <div class="author-details">
            <div class="author-name">{{ article.author }}</div>
            <div class="author-title">{{ article.authorTitle || '技术编辑' }}</div>
          </div>
          <div class="article-actions">
            <el-button @click="toggleLike" :type="article.isLiked ? 'primary' : ''">
              <el-icon><Star /></el-icon>
              {{ article.isLiked ? '已点赞' : '点赞' }}
              ({{ article.likeCount }})
            </el-button>
            <el-button @click="toggleFavorite" :type="article.isFavorited ? 'warning' : ''">
              <el-icon><Collection /></el-icon>
              {{ article.isFavorited ? '已收藏' : '收藏' }}
            </el-button>
            <el-button @click="shareArticle">
              <el-icon><Share /></el-icon>
              分享
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 文章内容 -->
    <div class="article-content">
      <div class="content-container">
        <div class="main-content">
          <!-- 文章正文 -->
          <div class="article-body">
            <div class="featured-image" v-if="article.image">
              <img :src="article.image" :alt="article.title" />
            </div>

            <div class="content-text" v-html="article.content"></div>

            <!-- 文章标签 -->
            <div class="article-tags" v-if="article.tags && article.tags.length > 0">
              <div class="tags-title">相关标签：</div>
              <div class="tags-list">
                <el-tag
                  v-for="tag in article.tags"
                  :key="tag"
                  @click="searchByTag(tag)"
                  class="tag-item"
                >
                  {{ tag }}
                </el-tag>
              </div>
            </div>

            <!-- 文章底部操作 -->
            <div class="article-footer">
              <div class="footer-stats">
                <span class="stat-item">
                  <el-icon><View /></el-icon>
                  {{ article.readCount }}次阅读
                </span>
                <span class="stat-item">
                  <el-icon><Star /></el-icon>
                  {{ article.likeCount }}个赞
                </span>
                <span class="stat-item">
                  <el-icon><ChatDotRound /></el-icon>
                  {{ comments.length }}条评论
                </span>
              </div>

              <div class="footer-actions">
                <el-button @click="toggleLike" :type="article.isLiked ? 'primary' : ''">
                  <el-icon><Star /></el-icon>
                  {{ article.isLiked ? '已点赞' : '点赞' }}
                </el-button>
                <el-button @click="toggleFavorite" :type="article.isFavorited ? 'warning' : ''">
                  <el-icon><Collection /></el-icon>
                  {{ article.isFavorited ? '已收藏' : '收藏' }}
                </el-button>
                <el-button @click="shareArticle">
                  <el-icon><Share /></el-icon>
                  分享
                </el-button>
              </div>
            </div>
          </div>

          <!-- 评论区 -->
          <div class="comments-section">
            <div class="comments-header">
              <h3>评论 ({{ comments.length }})</h3>
              <el-button @click="showCommentForm = !showCommentForm">
                <el-icon><EditPen /></el-icon>
                写评论
              </el-button>
            </div>

            <!-- 评论表单 -->
            <div class="comment-form" v-if="showCommentForm">
              <el-input
                v-model="newComment"
                type="textarea"
                :rows="4"
                placeholder="写下你的评论..."
                maxlength="500"
                show-word-limit
              />
              <div class="form-actions">
                <el-button @click="cancelComment">取消</el-button>
                <el-button type="primary" @click="submitComment" :loading="submitting">
                  发表评论
                </el-button>
              </div>
            </div>

            <!-- 评论列表 -->
            <div class="comments-list">
              <div
                v-for="comment in comments"
                :key="comment.id"
                class="comment-item"
              >
                <div class="comment-avatar">
                  <img :src="comment.userAvatar || '/images/default-avatar.png'" :alt="comment.username" />
                </div>

                <div class="comment-content">
                  <div class="comment-header">
                    <span class="username">{{ comment.username }}</span>
                    <span class="comment-time">{{ formatDate(comment.createdAt) }}</span>
                  </div>

                  <div class="comment-text">{{ comment.content }}</div>

                  <div class="comment-actions">
                    <el-button text size="small" @click="toggleCommentLike(comment)">
                      <el-icon><Star /></el-icon>
                      {{ comment.isLiked ? '已赞' : '点赞' }}
                      {{ comment.likeCount > 0 ? `(${comment.likeCount})` : '' }}
                    </el-button>
                    <el-button text size="small" @click="replyToComment(comment)">
                      <el-icon><ChatDotRound /></el-icon>
                      回复
                    </el-button>
                  </div>

                  <!-- 回复列表 -->
                  <div class="replies-list" v-if="comment.replies && comment.replies.length > 0">
                    <div
                      v-for="reply in comment.replies"
                      :key="reply.id"
                      class="reply-item"
                    >
                      <div class="reply-avatar">
                        <img :src="reply.userAvatar || '/images/default-avatar.png'" :alt="reply.username" />
                      </div>

                      <div class="reply-content">
                        <div class="reply-header">
                          <span class="username">{{ reply.username }}</span>
                          <span class="reply-time">{{ formatDate(reply.createdAt) }}</span>
                        </div>
                        <div class="reply-text">{{ reply.content }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 加载更多评论 -->
              <div class="load-more" v-if="hasMoreComments">
                <el-button @click="loadMoreComments" :loading="loadingComments">
                  加载更多评论
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 侧边栏 -->
        <div class="sidebar">
          <!-- 作者信息 -->
          <div class="author-card">
            <div class="author-avatar">
              <img :src="article.authorAvatar || '/images/default-avatar.png'" :alt="article.author" />
            </div>
            <div class="author-info">
              <h4 class="author-name">{{ article.author }}</h4>
              <p class="author-title">{{ article.authorTitle || '技术编辑' }}</p>
              <p class="author-bio">{{ article.authorBio || '专注于前端技术分享和教学' }}</p>
            </div>
            <div class="author-stats">
              <div class="stat-item">
                <div class="stat-number">{{ article.authorArticles || 25 }}</div>
                <div class="stat-label">文章</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">{{ article.authorFollowers || 1250 }}</div>
                <div class="stat-label">关注者</div>
              </div>
            </div>
            <el-button type="primary" @click="followAuthor">
              {{ article.isFollowingAuthor ? '已关注' : '关注作者' }}
            </el-button>
          </div>

          <!-- 相关文章 -->
          <div class="related-articles">
            <h3>相关文章</h3>
            <div class="articles-list">
              <div
                v-for="relatedArticle in relatedArticles"
                :key="relatedArticle.id"
                class="article-item"
                @click="viewArticle(relatedArticle)"
              >
                <div class="article-image">
                  <img :src="relatedArticle.image" :alt="relatedArticle.title" />
                </div>
                <div class="article-info">
                  <h4 class="article-title">{{ relatedArticle.title }}</h4>
                  <div class="article-meta">
                    <span class="read-count">{{ relatedArticle.readCount }}阅读</span>
                    <span class="publish-time">{{ formatDate(relatedArticle.publishedAt) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 热门标签 -->
          <div class="popular-tags">
            <h3>热门标签</h3>
            <div class="tags-cloud">
              <el-tag
                v-for="tag in popularTags"
                :key="tag.name"
                :size="getTagSize(tag.weight)"
                @click="searchByTag(tag.name)"
                class="tag-item"
              >
                {{ tag.name }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  View, Star, Collection, Share, ChatDotRound, EditPen
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()

// 响应式数据
const showCommentForm = ref(false)
const newComment = ref('')
const submitting = ref(false)
const loadingComments = ref(false)
const hasMoreComments = ref(true)

// 文章数据
const article = ref({
  id: 1,
  title: 'Vue 3.4 正式发布：性能提升与新特性详解',
  summary: 'Vue.js 团队发布了 3.4 版本，带来了显著的性能提升和多项新特性，包括更好的 TypeScript 支持和组合式 API 优化。',
  category: '技术动态',
  author: '前端技术团队',
  authorAvatar: '/images/authors/frontend-team.jpg',
  authorTitle: '高级前端工程师',
  authorBio: '专注于Vue.js生态系统的研究和开发，拥有丰富的前端架构经验。',
  authorArticles: 25,
  authorFollowers: 1250,
  image: '/images/news/vue-3-4.jpg',
  publishedAt: new Date('2024-01-15'),
  readCount: 15420,
  likeCount: 234,
  isLiked: false,
  isFavorited: false,
  isFollowingAuthor: false,
  tags: ['Vue.js', 'JavaScript', '前端框架', '性能优化'],
  content: `
    <p>Vue.js 3.4 版本的发布标志着这个流行前端框架的又一次重大进步。本次更新不仅带来了显著的性能提升，还引入了多项开发者期待已久的新特性。</p>

    <h2>主要新特性</h2>

    <h3>1. 更好的 TypeScript 支持</h3>
    <p>Vue 3.4 进一步改善了 TypeScript 的集成体验，提供了更准确的类型推断和更好的 IDE 支持。开发者现在可以享受到更智能的代码补全和错误检测。</p>

    <h3>2. 组合式 API 优化</h3>
    <p>组合式 API 在性能和易用性方面都得到了显著提升。新版本优化了响应式系统的内部实现，减少了不必要的重新渲染。</p>

    <h3>3. 构建工具改进</h3>
    <p>Vite 集成得到了进一步优化，构建速度和开发体验都有明显改善。</p>

    <h2>性能提升</h2>
    <p>根据官方测试数据，Vue 3.4 在以下方面实现了性能提升：</p>
    <ul>
      <li>组件渲染速度提升 15%</li>
      <li>内存使用减少 10%</li>
      <li>首次加载时间缩短 8%</li>
    </ul>

    <h2>升级指南</h2>
    <p>对于现有项目，升级到 Vue 3.4 相对简单。大部分项目只需要更新依赖版本即可：</p>
    <pre><code>npm update vue@latest</code></pre>

    <p>建议在升级前仔细阅读官方迁移指南，确保项目的兼容性。</p>
  `
})

// 评论数据
const comments = ref([
  {
    id: 1,
    username: '前端爱好者',
    userAvatar: '/images/users/user1.jpg',
    content: '非常详细的介绍，Vue 3.4 的性能提升确实很明显！',
    createdAt: new Date('2024-01-15 10:30:00'),
    likeCount: 12,
    isLiked: false,
    replies: [
      {
        id: 11,
        username: '技术小白',
        userAvatar: '/images/users/user2.jpg',
        content: '同感，特别是 TypeScript 支持的改进很棒！',
        createdAt: new Date('2024-01-15 11:00:00')
      }
    ]
  },
  {
    id: 2,
    username: 'Vue开发者',
    userAvatar: '/images/users/user3.jpg',
    content: '已经在项目中使用了，确实感受到了性能的提升。',
    createdAt: new Date('2024-01-15 14:20:00'),
    likeCount: 8,
    isLiked: true,
    replies: []
  }
])

// 相关文章
const relatedArticles = ref([
  {
    id: 2,
    title: 'React 18 并发特性实战指南',
    image: '/images/news/react-18.jpg',
    readCount: 9876,
    publishedAt: new Date('2024-01-13')
  },
  {
    id: 3,
    title: 'TypeScript 5.3 发布：装饰器稳定版来了',
    image: '/images/news/typescript-5-3.jpg',
    readCount: 8765,
    publishedAt: new Date('2024-01-12')
  },
  {
    id: 4,
    title: '微前端架构实践：从单体到微服务的演进',
    image: '/images/news/micro-frontend.jpg',
    readCount: 7654,
    publishedAt: new Date('2024-01-11')
  }
])

// 热门标签
const popularTags = ref([
  { name: 'Vue.js', weight: 10 },
  { name: 'React', weight: 9 },
  { name: 'TypeScript', weight: 8 },
  { name: 'JavaScript', weight: 7 },
  { name: 'Node.js', weight: 6 },
  { name: 'Webpack', weight: 5 },
  { name: 'Vite', weight: 4 },
  { name: 'CSS', weight: 3 }
])

// 方法
const getCategoryColor = (category) => {
  const colors = {
    '技术动态': 'primary',
    '行业资讯': 'success',
    '学习资源': 'warning',
    '职场发展': 'info',
    '开源项目': 'danger'
  }
  return colors[category] || 'default'
}

const getTagSize = (weight) => {
  if (weight >= 8) return 'large'
  if (weight >= 5) return 'default'
  return 'small'
}

const formatDateTime = (date) => {
  return new Date(date).toLocaleString('zh-CN')
}

const formatDate = (date) => {
  const now = new Date()
  const diff = now - date
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (days === 0) {
    return '今天'
  } else if (days === 1) {
    return '昨天'
  } else if (days < 7) {
    return `${days}天前`
  } else {
    return date.toLocaleDateString('zh-CN')
  }
}

const toggleLike = () => {
  article.value.isLiked = !article.value.isLiked
  if (article.value.isLiked) {
    article.value.likeCount++
    ElMessage.success('点赞成功')
  } else {
    article.value.likeCount--
    ElMessage.info('取消点赞')
  }
}

const toggleFavorite = () => {
  article.value.isFavorited = !article.value.isFavorited
  ElMessage.success(article.value.isFavorited ? '收藏成功' : '取消收藏')
}

const shareArticle = () => {
  const shareUrl = `${window.location.origin}/news/detail/${article.value.id}`
  navigator.clipboard.writeText(shareUrl).then(() => {
    ElMessage.success('分享链接已复制到剪贴板')
  }).catch(() => {
    ElMessage.error('复制失败，请手动复制链接')
  })
}

const followAuthor = () => {
  article.value.isFollowingAuthor = !article.value.isFollowingAuthor
  ElMessage.success(article.value.isFollowingAuthor ? '关注成功' : '取消关注')
}

const submitComment = async () => {
  if (!newComment.value.trim()) {
    ElMessage.warning('请输入评论内容')
    return
  }

  submitting.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))

    const comment = {
      id: Date.now(),
      username: '当前用户',
      userAvatar: '/images/users/current-user.jpg',
      content: newComment.value,
      createdAt: new Date(),
      likeCount: 0,
      isLiked: false,
      replies: []
    }

    comments.value.unshift(comment)
    newComment.value = ''
    showCommentForm.value = false

    ElMessage.success('评论发表成功')
  } catch (error) {
    ElMessage.error('评论发表失败，请重试')
  } finally {
    submitting.value = false
  }
}

const cancelComment = () => {
  newComment.value = ''
  showCommentForm.value = false
}

const toggleCommentLike = (comment) => {
  comment.isLiked = !comment.isLiked
  if (comment.isLiked) {
    comment.likeCount++
  } else {
    comment.likeCount--
  }
}

const replyToComment = (comment) => {
  ElMessage.info('回复功能开发中...')
}

const loadMoreComments = async () => {
  loadingComments.value = true
  try {
    // 模拟加载更多评论
    await new Promise(resolve => setTimeout(resolve, 1000))
    hasMoreComments.value = false
    ElMessage.info('没有更多评论了')
  } finally {
    loadingComments.value = false
  }
}

const viewArticle = (relatedArticle) => {
  router.push(`/news/detail/${relatedArticle.id}`)
}

const searchByTag = (tag) => {
  router.push({
    path: '/news/search',
    query: { q: tag }
  })
}

onMounted(() => {
  // 根据路由参数加载文章数据
  const articleId = route.params.id
  if (articleId) {
    // 加载文章详情数据
    // 增加阅读量
    article.value.readCount++
  }
})
</script>

<style lang="scss" scoped>
.news-detail {
  min-height: 100vh;
  background: var(--el-bg-color-page);
}

.article-header {
  background: white;
  border-bottom: 1px solid var(--el-border-color-extra-light);
  padding: 20px 0 40px;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--el-text-color-secondary);

  .read-count {
    display: flex;
    align-items: center;
    gap: 4px;
  }
}

.article-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--el-text-color-primary);
  margin-bottom: 16px;
  line-height: 1.3;

  @media (max-width: 768px) {
    font-size: 24px;
  }
}

.article-summary {
  font-size: 18px;
  color: var(--el-text-color-regular);
  line-height: 1.6;
  margin-bottom: 24px;

  @media (max-width: 768px) {
    font-size: 16px;
  }
}

.author-info {
  display: flex;
  align-items: center;
  gap: 16px;

  @media (max-width: 768px) {
    flex-wrap: wrap;
  }

  .author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .author-details {
    flex: 1;

    .author-name {
      font-size: 16px;
      font-weight: 600;
      color: var(--el-text-color-primary);
      margin-bottom: 2px;
    }

    .author-title {
      font-size: 14px;
      color: var(--el-text-color-secondary);
    }
  }

  .article-actions {
    display: flex;
    gap: 8px;

    @media (max-width: 768px) {
      width: 100%;
      justify-content: center;
    }
  }
}

.article-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.content-container {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;

  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
  }
}

.article-body {
  background: white;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  margin-bottom: 32px;

  @media (max-width: 768px) {
    padding: 20px;
  }
}

.featured-image {
  margin-bottom: 32px;
  border-radius: 8px;
  overflow: hidden;

  img {
    width: 100%;
    height: auto;
    display: block;
  }
}

.content-text {
  line-height: 1.8;
  color: var(--el-text-color-primary);

  :deep(h2) {
    font-size: 24px;
    font-weight: 600;
    margin: 32px 0 16px;
    color: var(--el-text-color-primary);
    border-bottom: 2px solid var(--el-color-primary);
    padding-bottom: 8px;
  }

  :deep(h3) {
    font-size: 20px;
    font-weight: 600;
    margin: 24px 0 12px;
    color: var(--el-text-color-primary);
  }

  :deep(p) {
    margin-bottom: 16px;
    text-align: justify;
  }

  :deep(ul), :deep(ol) {
    margin: 16px 0;
    padding-left: 24px;

    li {
      margin-bottom: 8px;
    }
  }

  :deep(pre) {
    background: var(--el-fill-color-extra-light);
    border-radius: 6px;
    padding: 16px;
    margin: 16px 0;
    overflow-x: auto;

    code {
      font-family: 'Consolas', 'Monaco', monospace;
      font-size: 14px;
    }
  }

  :deep(blockquote) {
    border-left: 4px solid var(--el-color-primary);
    padding-left: 16px;
    margin: 16px 0;
    color: var(--el-text-color-secondary);
    font-style: italic;
  }
}

.article-tags {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--el-border-color-extra-light);

  .tags-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
    color: var(--el-text-color-secondary);
  }

  .tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    .tag-item {
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        transform: scale(1.05);
      }
    }
  }
}

.article-footer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--el-border-color-extra-light);
  display: flex;
  justify-content: space-between;
  align-items: center;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 16px;
  }

  .footer-stats {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: var(--el-text-color-secondary);

    .stat-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
  }

  .footer-actions {
    display: flex;
    gap: 8px;
  }
}

.comments-section {
  background: white;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);

  @media (max-width: 768px) {
    padding: 20px;
  }
}

.comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;

  h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--el-text-color-primary);
  }
}

.comment-form {
  margin-bottom: 32px;
  padding: 20px;
  background: var(--el-fill-color-extra-light);
  border-radius: 8px;

  .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
  }
}

.comments-list {
  .comment-item {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;

    &:last-child {
      margin-bottom: 0;
    }

    .comment-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .comment-content {
      flex: 1;

      .comment-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;

        .username {
          font-weight: 500;
          color: var(--el-text-color-primary);
        }

        .comment-time {
          font-size: 12px;
          color: var(--el-text-color-placeholder);
        }
      }

      .comment-text {
        margin-bottom: 12px;
        line-height: 1.6;
        color: var(--el-text-color-regular);
      }

      .comment-actions {
        display: flex;
        gap: 16px;
      }
    }
  }

  .replies-list {
    margin-top: 16px;
    padding-left: 20px;
    border-left: 2px solid var(--el-border-color-extra-light);

    .reply-item {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;

      .reply-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .reply-content {
        flex: 1;

        .reply-header {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 4px;

          .username {
            font-size: 14px;
            font-weight: 500;
            color: var(--el-text-color-primary);
          }

          .reply-time {
            font-size: 12px;
            color: var(--el-text-color-placeholder);
          }
        }

        .reply-text {
          font-size: 14px;
          line-height: 1.5;
          color: var(--el-text-color-regular);
        }
      }
    }
  }

  .load-more {
    text-align: center;
    margin-top: 24px;
  }
}

.sidebar {
  .author-card,
  .related-articles,
  .popular-tags {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;

    h3 {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 16px;
      color: var(--el-text-color-primary);
    }
  }
}

.author-card {
  text-align: center;

  .author-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 16px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .author-info {
    margin-bottom: 20px;

    .author-name {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 4px;
      color: var(--el-text-color-primary);
    }

    .author-title {
      font-size: 14px;
      color: var(--el-color-primary);
      margin-bottom: 8px;
    }

    .author-bio {
      font-size: 14px;
      color: var(--el-text-color-secondary);
      line-height: 1.5;
    }
  }

  .author-stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;

    .stat-item {
      text-align: center;

      .stat-number {
        font-size: 20px;
        font-weight: 700;
        color: var(--el-color-primary);
        margin-bottom: 2px;
      }

      .stat-label {
        font-size: 12px;
        color: var(--el-text-color-secondary);
      }
    }
  }
}

.articles-list {
  .article-item {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 8px;
    border-radius: 6px;

    &:hover {
      background: var(--el-fill-color-extra-light);
    }

    &:last-child {
      margin-bottom: 0;
    }

    .article-image {
      width: 60px;
      height: 60px;
      border-radius: 6px;
      overflow: hidden;
      flex-shrink: 0;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .article-info {
      flex: 1;

      .article-title {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 8px;
        color: var(--el-text-color-primary);
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .article-meta {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: var(--el-text-color-placeholder);
      }
    }
  }
}

.tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  .tag-item {
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      transform: scale(1.05);
    }
  }
}

@media (max-width: 768px) {
  .content-container {
    grid-template-columns: 1fr;
  }

  .author-info {
    flex-direction: column;
    text-align: center;

    .article-actions {
      justify-content: center;
    }
  }

  .comment-item {
    flex-direction: column;

    .comment-avatar {
      align-self: flex-start;
    }
  }

  .replies-list {
    padding-left: 12px;
  }
}
</style>